
<template>
  <div>
    <videoPlay
        ref="player"
        width="800px"
        title="钢铁侠"
        :src="options.src"
        :type="options.type"
        :poster="options.poster"
        :currentTime="options.currentTime"
        :preload="options.preload"
        :muted="options.muted"
        :volume="options.volume"
        @loadeddata="loadeddata"
        @play="onPlay"
        @pause="onPause"
        @timeupdate="onTimeupdate"
        @canplay="onCanplay"
        @loadedmetadata="loadedmetadata"
    />
  </div>
</template>

<script>
// 引入样式和插件
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
import { ref, onMounted } from "vue";
import "videojs-flash";

// 视频播放器
export default {
  name: "work-video-player",
  components: {
    videoPlay
  },
  data() {
    return {
      // 视频配置信息vue3-video-play m3u8支持
      options:{
        // 视频链接
        // src:'http://jifutongjr.com/uploadFiles/vipStore/file/2023102110514921065.mp4',
        // src:'https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4',
        src:'http://p3q1xno76.bkt.clouddn.com/live/cihai_magpie_bridge_association_twenty-one/1.m3u8',
        // src:'rtmp://pili-publish.jixiangmei.zhongwei-info.com/jixiangmei/1616480008714',
        // 封面
        poster:'',
        // 资源格式 注意：video/xxx格式
        type:'video/mp4',
        // 是否自动播放
        preload:'auto',
        // 跳转到指定播放时间
        currentTime:50,
        // 这样就能自动播放 无声音
        volume:0.0,
        // 静音:想让video标签自动播放视频，必须先设置为静音(谷歌浏览器必须要要用户和页面有所交互后才能播放)
        muted: true,
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: false,
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 语言设置
        language: 'zh-CN',
        // 是否视频一结束就重新开始。
        loop: true,
      },
    }
  },
  setup() {

  },
  mounted() {
    // let src = 'https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4';
    let src = 'http://p3q1xno76.bkt.clouddn.com/live/cihai_magpie_bridge_association_twenty-one/1.m3u8';
    // src = 'rtmp://pili-publish.jixiangmei.zhongwei-info.com/jixiangmei/1687169415927'
    this.options.src = src;

    let fileType = this.getFileExtension(src);
    console.log('fileType:', fileType);
    this.options.type = `video/${fileType}`;

    const daysOfWeek = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const today = new Date().toLocaleDateString('zh-CN', { weekday: 'long' });
    console.log(today); // 输出 '星期一'、'星期二' 等星期几的文本表示


  },
  methods: {
    loadeddata() {
      console.log('缓冲中');
    },

    loadedmetadata(e) {
      console.log('成功获取资源长度：', e);
    },

    onPlay() {
      console.log('开始播放');
    },

    onPause() {
      console.log('暂停');
    },

    onTimeupdate() {

    },

    onCanplay() {
      console.log('暂停状态下可以播放');

      // 只有先设置静音的情况下 进入页面主动触发事件才能自动播放 此时无声音 需要自己设置下声音才能听到 eg：Bili的直播也是先看到画面 没有声音
      let btn = document.createElement('button');
      btn.onclick = (()=> {
        let player = this.$refs.player;
        player.play();
      })
      document.body.appendChild(btn);
      btn.click();
      btn.remove();
    },

    /**
     * 获取文件后缀名
     * @param filename
     * @returns {*}
     */
    getFileExtension(filename) {
      // 删除数组中的最后一个元素 对应的这个语法是取出了最后一个元素并删除数组的最后一个元素
      return filename.split('.').pop();
    }
  }
}
</script>

<style lang="scss" scoped>
video {
  width: 800px;
  object-fit: cover; /* 设置为cover可以保持视频的纵横比并填充整个容器 */
}
</style>

// 完整的配置项
<!--const vue3VideoPlayoptions = reactive({-->
<!--type: "auto", //视频类型-->
<!--width: "100%", //播放器高度-->
<!--height: "100%", //播放器高-->
<!--muted: false, //静音-->
<!--webFullScreen: false,-->
<!--speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速-->
<!--autoPlay: false, //自动播放-->
<!--loop: false, //循环播放-->
<!--mirror: false, //镜像画面-->
<!--ligthOff: false, //关灯模式-->
<!--volume: 0.3, //默认音量大小-->
<!--control: false, //是否显示控制-->
<!--speed: false,-->
<!--preload: "meta",-->
<!--controlBtns: [-->
<!--"audioTrack", //音轨切换按钮-->
<!--"quality", //视频质量切换按钮-->
<!--// "speedRate",//速率切换-->
<!--"volume", //音量-->
<!--// "setting",//设置-->
<!--"pip", //画中画按钮-->
<!--"pageFullScreen", //网页全屏按钮-->
<!--"fullScreen", //全屏按钮-->
<!--currentTime：0, // 跳转到指定播放时间-->
<!--], //显示所有按钮,-->
<!--});-->
